import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import { Tabs, Modal, message } from 'antd';
import PropTypes from 'prop-types';
import TabTitle from '@/components/TabTitle/TabTitle';
import MissionTable from './components/MissionTable'
import AssignModal from './components/AssignModal'
import http from '@/common/http';

const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;

@inject('rootStore') @observer
class MissionAssign extends Component {
  @observable showAssignModal  = false;
  @observable missionFilterList = [];
  @observable numberValue = '';
  @observable missionParam = []

  componentDidMount() {
    const setStore = this.props.rootStore.setStore

    if (this.props.match.params.type === "0") {
      setStore.toGetAssignList();
    } else {
      setStore.toGetAssignContributeList();
    }
  }

  tabsOnChange = (key) => {
    const setStore = this.props.rootStore.setStore
    const { history } = this.props;
    history.push(`/set/missionregulation/${key}`)

    if (key === "0") {
      setTimeout(() => {
        setStore.toGetAssignList();
      }, 600)
    } else {
      setTimeout(() => {
        setStore.toGetAssignContributeList();
      }, 600)
    }
  }

  openAssignModal = (record) => {
    const setStore = this.props.rootStore.setStore
    this.showAssignModal = true
    this.missionParam.push(record)

    setStore.missionList.forEach((item, index) => {
      if (item.authUserId !== record.authUserId && item.part === record.part) {
        item.value = 0
        this.missionFilterList.push(item)
      }
    })
  }

  assignCancel = () => {
    this.showAssignModal = false
    this.numberValue = ''
    this.missionFilterList = []
    this.missionParam = []
  }

  numberValueOnChange = (e, index) => {
    this.missionFilterList[index].remains = e.target.value
  }

  showAssignConfirm = (id, part) => {
    const setStore = this.props.rootStore.setStore
    const param = {
      params: [
        {
          authUserId: id,
          number: this.numberValue,
          part: part
        }
      ]
    }
    confirm({
      title: 'Are you sure Assign this account?',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        http.post('/article/assign', param)
        .then((response) => {
          if (response.success) {
            message.success('Success');
            setStore.toGetAssignList()
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });

  }

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render() {
    const setStore = this.props.rootStore.setStore
    const breadCrumb = ['Set', 'Mission Assign']

    return (
      <div className="news-list">
        <TabTitle
          showTabbar={true}
          title="Mission Assign"
          breadCrumb={breadCrumb} />
        <Tabs
          tabBarStyle={{paddingLeft: '28px'}}
          activeKey={this.props.match.params.type}
          onChange={this.tabsOnChange}>
          <TabPane tab="News" key="0">
            <MissionTable
              dataSource={setStore.missionList}
              openAssignModal={(record) => this.openAssignModal(record)} />
          </TabPane>
          <TabPane tab="Contribute" key="1">
            <MissionTable
              dataSource={setStore.missionList}
              openAssignModal={(record) => this.openAssignModal(record)} />
          </TabPane>
        </Tabs>
        <AssignModal
          showAssignModal={this.showAssignModal}
          assignCancel={this.assignCancel}
          dataSource={this.missionFilterList}
          valueOnChange={(e, index) => this.numberValueOnChange(e, index)}
          showAssignConfirm={(id, part) => this.showAssignConfirm(id, part)} />
      </div>
    )
  }
}

export default MissionAssign
